<template>
    <div class="orderconfirmNow">
        <div class="address">
            <div class="title">
                <p>地址:</p>
                <p><van-icon @click="onEdit" name="edit" size="22"/></p>
            </div>
            <div class="cont" v-if="address.id">
                <div class="name">{{address.name}}</div>
                <div class="tel">{{address.mobile}}</div>
                <div class="ads">{{address.province+address.city+address.district+address.address}}</div>
            </div>
            <div class="cont" v-else>
                暂无收货地址
            </div>
        </div>
        <van-card v-for="(item,index) in goods" :key="index" :num="item.num" :price="item.mPrice" :desc="item.guageName" :title="item.title" :thumb="item.url"/>
        <van-field v-model="message" rows="2" autosize label="留言" type="textarea" maxlength="50" placeholder="请输入留言" show-word-limit/>
        <div class="price">
            <div class="item">
                <p>小计</p>
                <p>￥{{sum_price}}</p>
            </div>
            <div class="item">
                <p>运费</p>
                <p>￥15</p>
            </div>
        </div>
        <van-submit-bar :price="(15+sum_price)*100" button-text="提交订单" @submit="onSubmit"></van-submit-bar>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
    data(){
        return{
            goods: this.$store.state.payList,
            sum_price:0,
            address:{},//地址列表
            message:null,//留言信息
        }
    },
    computed:{
        ...mapState(['openid', 'userState']),
        apiUrl() {
            return this.userState == 0 ? this.$api.merchantQuan: this.$api.platformOrder
        },
        cart_id() {
            let arr = this.goods.map(item => {
                return item.id
            })
            return arr.toString()
        },
    },
    mounted(){
        console.log(this.goods)
        this.getAddress()
        this.goods.forEach(item=>{
            this.sum_price = this.sum_price+(item.mPrice || item.price)*item.num
        })
    },
    methods:{
        //编辑地址
        onEdit() {
            this.$router.push('/address')
        },
        //获取地址列表
        async getAddress(){
            let form = {
                size:1000,
                current:1,
                openid:this.openid
            }
            let {data:{code,data}} = await this.$http.post(this.$api.addressList,form)
            if (code === 0) {
                data.items.forEach(item=>{
                    if (item.is_default == 0) {
                        this.address={
                            id:item.id,
                            name:item.name,
                            mobile:item.mobile,
                            province:item.province,
                            city:item.city,
                            district:item.district,
                            address:item.address
                        }
                    }
                })
                if (!this.address.name) {
                    this.address={
                        id:data.items[0].id,
                        name:data.items[0].name,
                        mobile:data.items[0].mobile,
                        province:data.items[0].province,
                        city:data.items[0].city,
                        district:data.items[0].district,
                        address:data.items[0].address
                    }
                }
            }
        },
        //提交订单
        async onSubmit(){
            console.log(this.goods,this.address)
            let form = {
                cart_id: this.cart_id,
                subtotal: this.sum_price,
                address_id: this.address.id,
                remark: this.message,
                openid: this.openid
            }
            let { data: { code, data } } = await this.$http.post(this.apiUrl,form)
            if (code === 0) {
                this.$store.commit('payOrder', data.total[0])
                console.log(data)
                this.$router.push('/payment')
            }
        },
        //修改地址
        onClickEditAddress(){
            
        }
    }
}
</script>
<style lang="scss" scoped>
    .orderconfirmNow{
        .address{
            background-color: #fff;
            .title{
                padding: 1rem;
                font-size: 16px;
                border-bottom: 1px solid #f0f0f0;
                display: flex;
                justify-content: space-between;
            }
            .cont{
                padding: 1rem;
            }
        }
        .price{
            background-color: #fff;
            padding:0 1rem;
            margin-top: 1rem;
            padding-bottom: 50px;
            .item{
                padding: 1px;
                display: flex;
                justify-content: space-between;
                line-height: 5rem;
                border-bottom: 1px solid #f0f0f0;
            }
            .item:last-child{
                border-bottom: 0;
            }
        }
    }
</style>